<template>
  <div class="show-line">
    <div ref="box" style="width: 700px;height:450px;"></div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    initLine() {
      // 1.0初始化实例
      const myChart = this.$echarts.init(this.$refs.box)

      // 2.0配置项
      const option = {
        title: {
          text: '数据统计'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['销售额', '订单']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: []
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '销售额',
            type: 'line',
            stack: '总量',
            data: []
          },
          {
            name: '订单',
            type: 'line',
            stack: '总量',
            data: []
          }
        ]
      }
      console.log(this.datas, '111111')
      option.xAxis.data = this.info.xData
      option.series[0].data = this.info.amountData
      option.series[1].data = this.info.orderData

      // 3.使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    }
  },
  watch: {
    info: {
      handler() {
        this.initLine()
      },
      deep: true
    }
  }
}
</script>

<style lang="less" scoped>
.show-line {
  background-color: #fff;
  margin-top: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 10px;
}
</style>
